<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-01 15:37:05
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-05 22:57:01
-->
<template>
  <div class="order">
    <!-- 顶部标题 -->
    <van-sticky :offset-top="0">
      <van-nav-bar title="订单" />
    </van-sticky>
    <!-- 头部标签区域 -->
    <div class="tab_content">
      <van-sticky :offset-top="40">
        <van-tabs
          v-model="active"
          @click="onClick"
          title-active-color="#144a9e"
          color="#144a9e"
        >
          <van-tab title="所有订单" label="所有订单"></van-tab>
          <van-tab title="待派单" label="待派单"></van-tab>
          <van-tab title="待接单" label="待接单"></van-tab>
          <van-tab title="待确认" label="待确认"></van-tab>
          <van-tab title="已完成" label="已完成"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <!-- 订单展示区 -->
    <div class="order">
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :thumb="order.customer.userFace"
        :status="order.status"
        @click="toDetail(order)"
      >
        <div slot="title">
          <span id="username"
            ><b>{{ order.customer.username }}</b></span
          >
          <span id="status">{{ order.status }}</span>
        </div>
        <div slot="desc" style="margin-top: 20px">
          <span>{{
            order.address.province +
            order.address.city +
            order.address.area +
            order.address.address
          }}</span>
        </div>
        <div slot="bottom">
          <span>{{ order.orderTime | dateFormat }}</span>
          <span id="price">{{ "¥" + order.total }}</span>
        </div>
      </van-card>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      // 订单状态
      status: "",
      // 顾客编号
      customerId: 0,
    };
  },
  computed: {
    // 引入order vuex中的方法
    ...mapState("order", ["orderData"]),
    // 引入user vuex中的方法
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入order vuex中的方法
    ...mapActions("order", ["getAllOrderData"]),
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    // 切换tabs
    onClick(name, title) {
      if (title == "所有订单") {
      } else {
        this.status = title;
      }
      this.queryOrder(this.userInfo.id);
    },
    // 查询订单数据
    queryOrder(customerId) {
      let data = {
        page: 1,
        pageSize: 8,
        status: this.status,
        customerId: customerId,
      };
      if (this.active == 0) {
        delete data.status;
      }
      // 调用vuex中的方法 传参
      this.getAllOrderData(data);
    },
    // 跳转到订单详情
    toDetail(order) {
      // 使用編程式导航进行路由的跳转
      this.$router.push({
        path: "/manager/detail",
        query: {
          order,
        },
      });
    },
  },
  created() {
    // 自动获取用户数据
    this.getUserInfo().then((res) => {
      // 自动获取订单数据

      this.queryOrder(this.userInfo.id);
    });
  },
};
</script>

<style scoped>
#price {
  float: right;
  color: red;
}
#status {
  float: right;
  color: #f8825d;
}
#username {
  font-size: 18px;
}
.order .van-card {
  box-shadow: 0 0 6px 0 #ccc;
  color: black;
  width: 95%;
  left: 2.5%;
  border-radius: 15px;
}
.order .van-tabs__nav van-tabs__nav--line {
  background-color: #ccccff;
}
.order /deep/ .van-nav-bar__title {
  color: white;
}
.van-nav-bar {
  background-color: pink;
  margin: 0;
  font-size: 16px;
  
}
</style>